0 22 ۲۳ بهمن ۹۵ویژگی animation-fill-modeاین ویژگی جالب و حرفه ای مشخص میکنه زمانی که انیمیشن برای المنت مورد نظر اجرا نمیشه، چه استایلی برای اون اعمال بشه. فرض کنید که یک المنت h1 بصورت زیر داریم:و کدهای CSS زیر رو برای اون تعریف کردیم:1234567891011121314@keyframes color {0% {background-color:darkblue;}100% {background-color:green;}}h1 {animation:color2sease;animation-delay:2s;background-color:red;}میبینید که رنگ این المنت رو در ابتدا قرمز در نظر گرفتیم و یک keyframes بنام color ساختیم و رنگ رو از آبی تیره به سبز تبدیل کردیم. این انیمیشن بصورت ease و بمدت دو ثانیه اجرا میشه. ما در این مطلب در همه مثالها از 2 ثانیه Delay استفاده میکنیم تا بتونیم قبل از اجرا شدن انیمیشن رو هم بررسی کنیم و بهتر با مقادیر ویژگی animation-fill-mode آشنا بشیم. اگر اون رو در مرورگر ببینید بصورت زیر هست:همونطور که دیدید در دو ثانیه اول که تاخیر داره، همون قرمز یا مقدار اولیه میمونه و زمانی که انیمیشن شروع میشه، از رنگ آبی به سبز تبدیل میشه و در آخر هم دوباره به مقدار اولیه که همون قرمز هست، برمیگرده. این روند سون لرن • آموزش...
ما را در سایت سون لرن • آموزش دنبال می کنید
برچسب : نویسنده : استخدام کار 7learn بازدید : 341 تاريخ : دوشنبه 25 بهمن 1395 ساعت: 13:18